
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { LeftOutline, MoreOutline, EyeOutline, UserOutline } from 'antd-mobile-icons';
import styles from './index.module.css';
import { Button } from 'antd-mobile';
import Nabar from '../../conpoment/Nabar';

function Index() {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('检查');
  const [showPatientList, setShowPatientList] = useState(false);
  const [currentPatient, setCurrentPatient] = useState({
    name: '王小柯',
    id: '2015****10'
  });

  // 患者列表数据
  const patientList = [
    { name: '王小柯', id: '2015****10' },
    { name: '李小明', id: '2016****20' },
    { name: '张小红', id: '2017****30' }
  ];

  // 检查报告数据
  const checkReports = [
    {
      id: 1,
      title: '双肾及肾血管彩色多普勒',
      time: '2020-01-01 10:20:36',
      status: '报告已出',
      statusType: 'completed'
    },
    {
      id: 2,
      title: '上腹部CT平扫',
      time: '2020-01-01 10:20:36',
      status: '报告已出',
      statusType: 'completed'
    },
    {
      id: 3,
      title: '核磁共振',
      time: '--',
      status: '报告未出',
      statusType: 'pending'
    }
  ];

  // 检验报告数据
  const testReports = [
    {
      id: 1,
      title: '血常规检查',
      time: '2020-01-01 09:30:15',
      status: '报告已出',
      statusType: 'completed'
    },
    {
      id: 2,
      title: '尿常规检查',
      time: '2020-01-01 09:45:20',
      status: '报告已出',
      statusType: 'completed'
    }
  ];

  const handleTabChange = (tab: string) => {
    setActiveTab(tab);
  };

  const handlePatientSwitch = (patient: any) => {
    setCurrentPatient(patient);
    setShowPatientList(false);
  };

  const getCurrentReports = () => {
    return activeTab === '检查' ? checkReports : testReports;
  };

  return (
    <div className={styles.container}>
      {/* 头部导航 */}
      <div className={styles.header}>
        <Nabar title='门诊报告' sticky={false} />
      </div>

      {/* 患者信息卡片 */}
      <div className={styles.patientCard}>
        <div className={styles.patientInfo}>
          <div className={styles.patientName}>{currentPatient.name}</div>
          <div className={styles.patientId}>{currentPatient.id}</div>
        </div>
        <div className={styles.switchButton} onClick={() => setShowPatientList(true)}>
          <UserOutline />
          <span>切换</span>
        </div>
      </div>

      {/* 标签切换 */}
      <div className={styles.tabContainer}>
        <div 
          className={`${styles.tab} ${activeTab === '检查' ? styles.activeTab : ''}`}
          onClick={() => handleTabChange('检查')}
        >
          检查
        </div>
        <div 
          className={`${styles.tab} ${activeTab === '检验' ? styles.activeTab : ''}`}
          onClick={() => handleTabChange('检验')}
        >
          检验
        </div>
      </div>

      {/* 报告列表 */}
      <div className={styles.reportList}>
        {getCurrentReports().map((report) => (
          <div 
            key={report.id} 
            className={`${styles.reportCard} ${report.statusType === 'completed' ? styles.clickable : ''}`}
            onClick={() => {
              if (report.statusType === 'completed') {
                navigate('/outpatient_guide_xq');
              }
            }}
          >
            <div className={styles.reportContent}>
              <div className={styles.reportTitle}>{report.title}</div>
              <div className={styles.reportTime}>报告时间: {report.time}</div>
            </div>
            <div className={`${styles.reportStatus} ${styles[report.statusType]}`}>
              {report.status}
            </div>
          </div>
        ))}
      </div>
      {/* 患者切换弹出层 */}
      {showPatientList && (
        <div className={styles.overlay} onClick={() => setShowPatientList(false)}>
          <div className={styles.popup} onClick={(e) => e.stopPropagation()}>
            <div className={styles.popupHeader}>
              <h3>选择患者</h3>
              <div className={styles.closeButton} onClick={() => setShowPatientList(false)}>
                ×
              </div>
            </div>
            <div className={styles.patientList}>
              {patientList.map((patient, index) => (
                <div 
                  key={index} 
                  className={`${styles.patientItem} ${currentPatient.name === patient.name ? styles.selected : ''}`}
                  onClick={() => handlePatientSwitch(patient)}
                >
                  <div className={styles.patientInfo}>
                    <div className={styles.patientName}>{patient.name}</div>
                    <div className={styles.patientId}>{patient.id}</div>
                  </div>
                  {currentPatient.name === patient.name && (
                    <div className={styles.checkIcon}>✓</div>
                  )}
                </div>
              ))}
            </div>
            <Button  style={{marginTop: '60px',padding: '10px'}} block color='primary'>添加患者</Button>
          </div>
        </div>
      )}
    </div>
  );
}

export default Index;
